<!-- 登录注册页面 -->
<template>
	<div class="wrapper">
		<div>
			<el-form ref="loginRiForm" :rules="rules" :model="loginRiForm" class="loginRiContainer">
				<h3 class="loginRiTitle">校园二手交易平台管理系统</h3>
				<el-form-item prop="number">
					<el-input type="text" auto-complete="false" v-model="loginRiForm.number" placeholder="请输入用户名">
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" auto-complete="false" v-model="loginRiForm.password" placeholder="请输入密码">
					</el-input>
				</el-form-item>
				<el-form-item prop="code">
					<el-input type="text" auto-complete="false" v-model="loginRiForm.code" placeholder="点击图片更换验证码"
						style="width:190px; margin-right:5px; vertical-align:middle;" />
					<img style="vertical-align:middle;" :src="captchaUrl" @click="updateCaptcha">
				</el-form-item>
				<!-- <el-checkbox v-model="checked" class="loginRemenber">记住我</el-checkbox> -->
				<el-button type="primary" style="width: 100%;" @click="submitLogin">登录或注册</el-button>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		setRoutes
	} from '@/router';
	export default {
		name: "LoginRi",
		data() {
			return {
				captchaUrl: '/kaptcha?time=' + new Date(),
				loginRiForm: {
					number: '',
					password: '',
					code: ''
				},
				checked: true,
				rules: {
					number: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, {
						min: 8,
						max: 12,
						message: '用户账号长度应在8-12位'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			updateCaptcha() {
				this.captchaUrl = '/kaptcha?time=' + new Date();
			},
			submitLogin() {
				this.$refs.loginRiForm.validate((valid) => {
					if (valid) {
						// 用户登录或注册请求
						this.request.post('/user/loginRig', this.loginRiForm).then(resp => {
							if (resp.code == 200) {
								localStorage.setItem("user", JSON.stringify(resp.obj)) //存储用户信息到游览器
								localStorage.setItem("menus", JSON.stringify(resp.obj.menus))
								console.log(resp.obj.menus);

								// 动态设置当前路由
								setRoutes()
								this.$router.replace("/home")
								this.$message.success(resp.message)
							} else if (resp.code == 500 && resp.message == "用户密码错误！！") {
								this.$message.error(resp.message)
							} else {
								this.$message.error(resp.message)
							}
						})
					} else {
						this.$message.error('请将数据输入完整！');
						return false;
					}
				});
			}
		}
	}
</script>

<style>
	.wrapper {
		height: 100vh;
		background-image: linear-gradient(to bottom, #2bae85, #5cb3cc, #1491a8, #1ba784);
		overflow: hidden;
	}

	.loginRiContainer {
		border-radius: 15px;
		background-clip: padding-box;
		margin: 180px auto;
		width: 300px;
		padding: 15px 35px 15px 35px;
		background: #fff6f3;
		border: 1px solid #5cb3cc;
		box-shadow: 0 0 10px #a2a39e;
	}

	.loginRiTitle {
		color: #603d30;
		margin: 10px auto 30px auto;
		text-align: center;
	}

	/* 	.loginRemenber {
		text-align: center;
		margin: 0px 0px 10px 0px;
	} */
</style>
